<div class="container-tight py-4">
    <form ng-class="{'submitted': submitted}" ng-submit="register()" autocomplete="off" ng-init="init()">
        <div class="text-center mb-4">
            <a href="."><img src="/mix-app/css/portal/img/mixcore-logo-red-2.svg" alt="Mixcore CMS" height="36"></a>
        </div>
        <div class="card card-md">
            <div class="card-body text-center py-4 p-sm-5">
                <img src="/mix-app/css/portal/img/illustrations/undraw_art_museum_8or4.svg" height="128" class="mb-n2"
                    height="120" alt="">
                <!-- <h1 class="mt-5">Welcome to Mixcore!</h1> -->
                <p class="text-muted mt-4">We are now creating your most powerful admin account!</p>
            </div>
            <div class="hr-text hr-text-center hr-text-spaceless">your data</div>
            <div class="card-body">
                <!-- /////////////////////////////////////////////////////// -->
                <div class="">
                    <!-- <h1 class="lead mb-5 mt-3">
                        We are now creating your most powerful account!
                    </h1> -->
                    <div class="mb-3">
                        <label class="form-label">Administrator username</label>
                        <input ng-model="user.username" class="form-control" required placeholder="administrator"
                            autocomplete="off" />
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="mb-3">
                                <label class="form-label"> Password </label>
                                <input ng-model="user.password" type="password" required class="form-control"
                                    placeholder="MyM0stC0mpl3xP@ssw0rd" />
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label class="form-label"> Confirm Password </label>
                                <input ng-model="user.confirmPassword" type="password" required class="form-control"
                                    placeholder="MyM0stC0mpl3xP@ssw0rd" />
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Your Email Address </label>
                        <input ng-model="user.email" class="form-control" type="email" required
                            placeholder="your-email-address@domain.com" />
                    </div>

                    <!-- <hr class="mt-4"> -->
                    <div class="">
                        <label class="form-check">
                            <input ng-model="user.isAgreed" class="form-check-input" type="checkbox" required />
                            <span class="custom-control-label">
                                I agree to the
                                <a href="https://mixcore.org/terms-and-conditions.html" target="_blank">terms and
                                    conditions</a>.</span>
                        </label>
                        <div id="notTNCYetChecked" class="invalid-feedback" style="padding-left: 24px">
                            You must agree before submitting.
                        </div>
                    </div>
                    <p class="text-danger mb-3">
                        * Please keep this account credential safe and only share this account to
                        your most trusted person!
                    </p>
                    <!-- <div class="text-end"> -->
                    <!-- <button type="submit" class="btn btn-primary px-4" style="min-width: 200px">
                            Continue <i class="fa fa-angle-right"></i>
                        </button> -->
                    <!-- <button type="button" class="btn btn-link" ng-click="advanceSetup()">Advance Setup</button> -->
                    <!-- </div> -->
                </div>
                <!-- /////////////////////////////////////////////////////// -->
            </div>
        </div>
        <div class="row align-items-center mt-3">
            <div class="col-4">
                <div class="progress">
                    <div class="progress-bar" style="width: 50%" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                        aria-valuemax="100">
                        <span class="visually-hidden">25% Complete</span>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="btn-list justify-content-end">
                    <!-- <a href="#" class="btn btn-link link-secondary">
                    Set up later
                </a> -->
                    <button type="submit" class="btn btn-primary px-4">
                        Continue
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>